<template>
    <div style="min-width:829px">
    <div v-if="$route.path == '/photoGallery'">
        <!-- <div class="vs-search-box">
            <el-form ref="form" :inline="true" :model="paging" label-width="110px">
                <el-form-item label="门店：">
                    <el-select v-model="paging.store_id" clearable style="width:200px" placeholder="请选择">
                        <el-option
                            v-for="item in shopList"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="评价标签名称">
                    <el-input style="width:200px" v-model="paging.title"></el-input>
                </el-form-item>
                <el-form-item label="" class="vs-right-btns">
                    <el-button @click="reset">重置</el-button>
                    <el-button @click="select()" type="primary">查询</el-button>
                </el-form-item>
            </el-form>
        </div> -->
        <div class="vs-table-box">
            <div class="operation-box clear-float">
                <el-button icon="el-icon-plus" @click="dialogFormVisible = true" style="margin-left:auto;" type="primary">新增</el-button>
            </div>
            <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table" style="width: 100%">
                <el-table-column prop="url" label="图片">
                    <template slot-scope="scope">
                        <vs-uploading width="120px" readonly ref="uploading" v-model="scope.row.url"></vs-uploading>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="类型">
                    <template slot-scope="scope">
                        {{scope.row.type == 1 ? '会员卡图片' : 'banner'}}
                    </template>
                </el-table-column>
                <el-table-column prop="create_time" label="创建时间"></el-table-column>
                <el-table-column fixed="right" width="109" label="操作"> 
                    <template slot-scope="scope">
                        <span @click="setRow(1,scope.row)" class="tab-table-text">编辑</span>
                        <span @click="setRow(2,scope.row,scope.$index)" class="tab-red-text">删除</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="vs-paging-box">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="paging.page"
                    :page-size="paging.limit"
                    layout="prev, pager, next, jumper"
                    :total="paging.total">
                </el-pagination>
            </div>
        </div>
    </div>
    <router-view></router-view>
    <el-dialog :title="(form.id ? '编辑' : '添加') + '图片'" :visible.sync="dialogFormVisible" width="40%" :before-close="closeDialog">
        <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
            <el-form-item label="图片类型：" prop="type" class="ruleFormInput">
                <el-select v-model="form.type" placeholder="请选择图片类型">
                    <el-option label="会员卡图片" :value="1"></el-option>
                    <el-option label="banner" :value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="图片：" prop="url" ref="url">
                <vs-uploading
                width="120px" 
                ref="uploading"
                v-model="form.url"
                ></vs-uploading>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="closeDialog">取 消</el-button>
            <el-button type="primary" @click="addLabel()">确 定</el-button>
        </div>
    </el-dialog>
    </div>
</template>

<script>
import VsUploading from '../../components/VsUploading'
export default {
    components:{
        VsUploading
    },
    data() {
        return {
            rules:{
                url:{ required: true, message: '请上传图片!', trigger: 'blur' },
                type:{ required: true, message: '请选择图片类型', trigger: 'change' },
            },
            dialogFormVisible:false,
             options: [
                {
                    value: '正大店',
                    label: '正大店'
                }
            ],
            recordList:[],
            loading:false,
            paging:{
                page:1,
                limit:20,
                total:0,//总数
            },
            form:{
                url: '',
                type: 1,
                id:''
            },
            tableData: [],
            shopList: []
        };
    },
    created() {
       this.GetList()
    //    this.homegetStore()
    },
    methods: {
        async homegetStore(){
            let {code,data} = await this.$Http.homegetStore();
            if(code){
                this.shopList = data;
            }
        },
        handleCurrentChange(val){
            this.paging.page = val;
            this.GetList();
        },
        // 查询
        select(){
            // if(!this.paging.title){
            //     this.utils.message('查询关键字不能为空！')
            //     return false
            // }
            this.GetList()
        },
        async setRow(type,row,index){
            if(type == 1){
                this.form.id = row.id
                this.form.url = row.url
                this.form.type = row.type
                this.dialogFormVisible = true
            }else{
                  this.$confirm('此操作将永久删除该图片, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(async () => {
                        let { code } = await this.$Http.delImgs({id:row.id});
                        if (code) {
                            this.tableData.splice(index,1)
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            }
        },
        // 添加标签
        async addLabel(type,params){
            this.$refs['ruleForm'].validate(async valid => {
                if(!valid)return;
                this.isBtn = true;
                let obj = Object.assign({},this.form);
                let {code,data} = await this.$Http.setImgs(obj);
                this.isBtn = false;
                if(code){
                    this.$message.success((this.form.id?'修改':'添加')+"成功!");
                    this.GetList()
                    this.dialogFormVisible = false
                    this.form = this.$options.data().form;
                }
            })
        },
        // 获取标签列表
        async GetList() {
            this.loading = true;
            let { code, data } = await this.$Http.getImgs(this.paging);
            this.loading = false;
            if (code) {
                this.tableData = data.data;
                this.paging.limit =data.per_page
                 this.paging.total = data.total;
            }
        },
        // 关闭弹窗
        closeDialog(){
            this.form.id = ''
            this.form.url = ''
            this.form.type = 1
             this.dialogFormVisible = false
             this.form = this.$options.data().form;
        },
        reset(){//重置
             this.paging = this.$options.data().paging;
             this.GetList()
        },
    },
};
</script>

<style lang="scss" scoped>

.image-thumbnail{
    width: 130px;
    height: 130px;
}
</style>